<template>
    <div class="app-container" style="padding: 5px;">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">销售售后工单统计</span>
            </div>
            <div ref="chart" style="width: 100%; height: 500px;"></div>
        </el-card>

        <el-card class="box-card" style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">销售售后工单明细</span>
            </div>
            <el-table v-loading="loading" :data="kfhfOrders" border stripe>
                <el-table-column label="日期" align="center" prop="wk_year" width="250">
                    <template slot-scope="scope">
                        <span v-if="scope.row.wk_year=='0'">Null</span>
                        <span v-if="scope.row.wk_year!='0'">{{ scope.row.wk_year }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户片区" align="center" prop="area"/>
                <el-table-column label="销售" align="center" prop="slaeman"/>
                <el-table-column label="客户" align="center" prop="cus"/>
                <el-table-column label="品种" align="center" prop="brand"/>
                <el-table-column label="问题" align="left" prop="question" width="400"/>
                <el-table-column label="售后接收时间" align="center" prop="picktime"/>
                <el-table-column label="处理结束时间" align="center" prop="finishtime"/>
                <el-table-column label="处理结果" align="center" prop="cljg"/>
                <el-table-column label="赔付金额" align="center" prop="pfje"/>
                <el-table-column label="赔付数量" align="center" prop="pfsl"/>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
        </el-card>
    </div>
</template>

<script>
import { listXsshOrder,listXsshOrdersInfo } from "@/api/system/dashboard/shdashboard";
import * as echarts from 'echarts';
export default {
  name: "Xsshdash",
  data() {
    return {
      loading: true,
      total: 0,
      kfhfOrders: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wkYear: null,
      },
    }
  },
  created() {
    this.getList();
  },
  mounted(){
    this.initChart();
  },
  methods: {
    getList(){
      this.loading = true;
      listXsshOrdersInfo(this.queryParams).then(response => {
        this.kfhfOrders = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    initChart(){
      listXsshOrder().then(res =>{
        const chart = echarts.init(this.$refs.chart);
        const that = this;
        const option = {
          title: {
            text: '',
            left: 'left',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            height: '60%' // 设置内部图形的高度为容器高度的 70%
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
              type: 'category',
              data: res.data.labels,
              axisLabel: {
                rotate: 45, // 设置 X 轴文字旋转角度
                interval: 0, // 强制显示所有标签
                fontSize: 12, // 文字大小
                color: '#333' // 文字颜色
              }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: res.data.datas,
              type: 'line',
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}' // 标签内容格式化为数据值
              },
              symbol: 'circle',
              symbolSize: 10,                // 1) 点大小
              itemStyle: {
                color: '#5470c6',            // 2) 点颜色（正常状态）
                borderColor: 'red', // 需要边框再开
                borderWidth: 2
              },
            }
          ]
        };
        chart.setOption(option);
        chart.on('click', function(params) {
          if (params.componentType === 'series') {
            that.queryParams.wkYear = params.name;
            console.log("that.queryParams.wkYear---->",that.queryParams.wkYear)
            chart.dispatchAction({
              type: 'downplay',
              seriesIndex: [0]
            });

            // 高亮选中的柱子
            chart.dispatchAction({
              type: 'highlight',
              seriesIndex: [0],
              dataIndex: params.dataIndex
            });

            var newData = res.data.datas.map((value, index) => {
              var item = {
                value: value,
                itemStyle: {
                  color: '#5470c6',            // 2) 点颜色（正常状态）
                  borderColor: 'red', // 需要边框再开
                  borderWidth: 2
                },
              };
              // 非选中的柱子设置透明度
              if (index !== params.dataIndex) {
                item.itemStyle.opacity = 0.3;
              }
              return item;
            });
            chart.setOption({
              series: [{
                data: newData
              }]
            });
            that.getList();
          }
        });
        chart.getZr().on('click', function(event) {
          if (!event.target) {
            that.queryParams.wkYear = null;
            var newData = res.data.datas.map((value, index) => ({
              value: value,
              itemStyle: {
                color: '#5470c6',            // 2) 点颜色（正常状态）
                borderColor: 'red', // 需要边框再开
                borderWidth: 2
              },
            }));
            chart.setOption({
              series: [{
                data: newData
              }]
            });

            // 取消所有高亮
            chart.dispatchAction({
              type: 'downplay',
              seriesIndex: [0]
            });
            that.getList();
          }
        });
      })
    },
  }
};
</script>
